<template>
  <view class="container">
    <!-- Tab 切换 -->
    <view class="tabs">
      <view 
        class="tab" 
        :class="{ active: selectedTab === 'adult' }" 
        @click="selectTab('adult')"
      >成人</view>
      <view 
        class="tab" 
        :class="{ active: selectedTab === 'child' }" 
        @click="selectTab('child')"
      >儿童</view>
    </view>
    <!-- 提示信息 -->
    <view class="notice">
      <image class="check-icon" src="/static//img/BodycheckImage/renzheng.png" mode="aspectFit"></image>
      <text>国家卫健委要求，就医行为必须实名登记</text>
    </view>

    <!-- 表单 -->
    <form @submit.prevent="showConfirmDialog">
      <view class="input-group">
        <text class="label">* 姓名：</text>
        <input class="input" placeholder="请输入真实姓名" v-model="formData.name" />
      </view>
      <view class="input-group">
        <text class="label">* 证件类型：</text>
        <picker mode="selector" :range="idTypes" @change="onIdTypeChange">
          <view class="picker-item">
            <text>{{ formData.selectedIdType }}</text>
          </view>
        </picker>
      </view>
      <view class="input-group">
        <text class="label">* 证件号码：</text>
        <input class="input" placeholder="请输入正确的证件号码" v-model="formData.idNumber" @blur="validateIdNumber" />
        <text v-if="errors.idNumber" class="error">{{ errors.idNumber }}</text>
      </view>
      <view class="input-group">
        <text class="label">* 手机号码：</text>
        <input class="input" placeholder="请输入手机号码" v-model="formData.phoneNumber" @blur="validatePhoneNumber" />
        <text v-if="errors.phoneNumber" class="error">{{ errors.phoneNumber }}</text>
      </view>
      <view class="input-group">
        <text class="label">居住地：</text>
        <input type="text" placeholder="请输入居住地" v-model="formData.selectedRegion"/>
      </view>
      <view class="input-group">
        <text class="label">详细地址：</text>
        <input class="input" placeholder="请填写详细地址" v-model="formData.address" />
      </view>
      <view class="input-group">
        <text class="label">设为默认就诊人：</text>
        <switch class="switch" v-model="formData.isDefaultPatient" />
      </view>
         <button class="submit-button" type="button" @click="showConfirmDialog">保存</button>
    </form>

    <!-- 模态框 -->
    <view v-if="showConfirm" class="modal-overlay">
      <view class="modal-content">
        <text class="modal-message">确定要保存吗？</text>
        <view class="modal-buttons">
          <button class="modal-button" @click="closeConfirmDialog">取消</button>
          <button class="modal-button" @click="confirmSubmit">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: 'adult',
      formData: {
        name: '',
        selectedIdType: '身份证',
        idNumber: '',
        phoneNumber: '',
        selectedRegionIndex: [0, 0, 0],
        selectedRegion: "",
        address: '',
        isDefaultPatient: false
      },
      idTypes: ['身份证', '护照', '其他'],
      errors: {}, // 错误信息对象
      showConfirm: false // 控制模态框显示/隐藏
    };
  },
  watch: {
    'formData.idNumber': function(newValue) {
      this.validateIdNumber();
    },
    'formData.phoneNumber': function(newValue) {
      this.validatePhoneNumber();
    }
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
    onIdTypeChange(e) {
      this.formData.selectedIdType = this.idTypes[e.detail.value];
    },
    validateIdNumber() {
      this.errors.idNumber = ''; // 清空之前的错误

      if (this.formData.selectedIdType === '身份证') {
        const idCardRegex = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
        if (!idCardRegex.test(this.formData.idNumber)) {
          this.errors.idNumber = '请输入正确的身份证号码';
        }
      }
    },
    validatePhoneNumber() {
      this.errors.phoneNumber = ''; // 清空之前的错误

      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.formData.phoneNumber)) {
        this.errors.phoneNumber = '请输入正确的手机号码';
      }
    },
    showConfirmDialog() {
      this.validateIdNumber(); // 在显示确认对话框前验证输入
      this.validatePhoneNumber();
        this.showConfirm = true; // 显示模态框
    },
    closeConfirmDialog() {
      this.showConfirm = false; // 关闭模态框
    },
    confirmSubmit() {
      console.log('Form submitted:', this.formData);
      this.showConfirm = false; // 提交后关闭模态框
	  uni.navigateTo({
	    url: '/pages/Hoem/Bodycheck/shopping/Order/Order',
	  });
    }
  }
};
</script>

<style scoped>
/* 添加模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.modal-message {
  font-size: 16px;
  margin-bottom: 20px;
}

.modal-buttons {
  display: flex;
  justify-content: space-around;
}

.modal-button {
  padding: 8px 16px;
  margin: 0 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button:first-child {
  background-color: #ff4d4f;
  color: white;
}

.modal-button:last-child {
  background-color: #1890ff;
  color: white;
}

/* 添加错误信息样式 */
.error {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}

/* 其他样式保持不变 */
.container {
  background-color: #f5f5f5;
  padding: 16px;
}
.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #e0e0e0;
  padding: 8px 0;
  margin-bottom: 16px;
}
.tab {
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.tab.active {
  background-color: #007aff;
  color: white;
}
.notice {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 8px;
  margin-bottom: 16px;
  border-radius: 4px;
}
.check-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.input-group {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.label {
  font-size: 16px;
  margin-right: 8px;
}
.input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.picker-item {
  flex: 1;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
}
.submit-button {
  background-color: #007aff;
  color: white;
  padding: 12px;
  text-align: center;
  border-radius: 20px;
  margin-top: 16px;
}
.switch {
  margin-left: 8px;
}
</style>